<template>
  <div class="home-view">
    <!-- 全屏顶部Banner -->
    <!-- <section class="fullscreen-banner">
      <div class="banner-content">
        <h1>探索技术世界</h1>
        <p class="subtitle">分享前端开发、设计思维与技术实践</p>
        <div class="scroll-indicator">
          <span>向下滚动</span>
          <svg width="24" height="24" viewBox="0 0 24 24">
            <path d="M7 10l5 5 5-5z" fill="currentColor"/>
          </svg>
        </div>
      </div>
    </section> -->

    <!-- 精选文章全屏区块 -->
    <!-- <section class="fullscreen-section featured-section">
      <div class="section-header">
        <h2 class="section-title">精选内容</h2>
        <p class="section-description">编辑推荐的高质量文章</p>
      </div>
      <div class="featured-grid">
        <ArticleCard 
          v-for="(article, index) in featuredArticles" 
          :key="article.id"
          :article="article"
          :class="['featured-card', `card-${index + 1}`]"
        />
      </div>
    </section> -->

    <!-- 最新文章全屏区块 -->
    <section class="fullscreen-section latest-section">
      <div class="section-header">
        <h2 class="section-title">最新文章</h2>
        <p class="section-description">探索最新发布的技术内容</p>
      </div>
      <div class="latest-grid">
        <ArticleCard 
          v-for="article in articles" 
          :key="article.id"
          :article="article"
          class="latest-card"
        />
      </div>
    </section>

    <!-- 底部CTA -->
    <!-- <section class="cta-section">
      <h2>订阅我们的博客</h2>
      <p>获取最新技术文章直接发送到您的邮箱</p>
      <div class="subscribe-form">
        <input type="email" placeholder="输入您的邮箱地址">
        <button>订阅</button>
      </div>
    </section> -->
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useArticles } from '@/composables/useArticles'
import ArticleCard from '@/components/ArticleCard.vue'

const { articles } = useArticles()

const featuredArticles = computed(() => {
  return articles.value.filter(article => article.isFeatured).slice(0, 3)
})
</script>

<style scoped>
.home-view {
  width: 100%;
  overflow-x: hidden;
}

/* 全屏Banner样式 */
.fullscreen-banner {
  height: 100vh;
  min-height: 600px;
  width: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: 0 2rem;
}

.banner-content {
  max-width: 800px;
  z-index: 2;
}

.banner-content h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
}

.subtitle {
  font-size: 1.25rem;
  opacity: 0.9;
  margin-bottom: 3rem;
}

.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) translateX(-50%);
  }
  40% {
    transform: translateY(-20px) translateX(-50%);
  }
  60% {
    transform: translateY(-10px) translateX(-50%);
  }
}

/* 全屏区块通用样式 */
.fullscreen-section {
  min-height: 100vh;
  width: 100%;
  padding: 6rem 2rem;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #2d3748;
}

.section-description {
  font-size: 1.1rem;
  color: #718096;
  max-width: 600px;
  margin: 0 auto;
}

/* 精选文章网格布局 */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.featured-card {
  transition: transform 0.3s ease;
}

.featured-card:hover {
  transform: translateY(-10px);
}

.card-1 {
  grid-column: span 2;
}

/* 最新文章网格布局 */
.latest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* CTA区块样式 */
.cta-section {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: white;
  text-align: center;
  padding: 6rem 2rem;
}

.cta-section h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.cta-section p {
  font-size: 1.1rem;
  opacity: 0.9;
  margin-bottom: 2rem;
}

.subscribe-form {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
}

.subscribe-form input {
  flex: 1;
  padding: 1rem;
  border: none;
  border-radius: 4px 0 0 4px;
  font-size: 1rem;
}

.subscribe-form button {
  padding: 0 2rem;
  background: #1e293b;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s;
}

.subscribe-form button:hover {
  background: #0f172a;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .featured-grid {
    grid-template-columns: 1fr;
  }
  
  .card-1 {
    grid-column: span 1;
  }
  
  .subscribe-form {
    flex-direction: column;
  }
  
  .subscribe-form input {
    border-radius: 4px;
    margin-bottom: 1rem;
  }
  
  .subscribe-form button {
    border-radius: 4px;
    padding: 1rem;
  }
}
</style>